<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板语法</title>
</head>
<body>
  <!-- 
    Vue模板语法有2大类：
      1.插值语法：
        功能：用于解析标签体内容。
        写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
      2.指令语法：
        功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）。
        举例：v-bind:href='xxx' 或 简写为 :href='xxx' ，xxx同样要写js表达式，
            且可以直接读取到data中的所有属性。
        备注：Vue中有很多的指令，且形式都是v-???，此处我们只是拿v-bind举个例子

        v-bind: ->>>>  : 仅可有v-bind可以进行如此简写

        实现标签内容的动态化就用插值，实现标签属性的动态化就用指令
   -->
  <div id="root">
    <h1>模板语法</h1>
    <h2>插值语法</h2>
    <h3>你好，{{name}}</h3>
    <hr>
    <h2>指令语法</h2>
    <a v-bind:href="url.toUpperCase()">点击去gitee网站 1</a>
    <a :href="url">点击去gitee网站 2</a>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false  
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'Shinea',
        url: 'www.gitee.com',
        hello: 'kkk'
      }
    })
  </script>
</body>
</html>